<template>
  <nav-bar v-slot:default>新用户注册</nav-bar>

  <div style="margin-top: 50px">
    <div style="text-align: center">
      <van-image
        width="100"
        height="100"
        src="https://img01.yzcdn.cn/vant/logo.png"
      />

      <van-form @submit="onSubmit">
        <van-field
          v-model="name"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
          v-model="password_confirmation"
          type="password"
          name="确认密码"
          label="确认密码"
          placeholder="请填写一致密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
         <van-field
          v-model="email"
          name="电子邮箱"
          label="电子邮箱"
          placeholder="请输入正确的电子邮箱格式"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <div class="link-login" @click="$router.push({path:'/login'})">已有账户，立即登录</div>
          <van-button round block type="info" color="#42b983" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import navBar from "components/common/navbar/NavBar";
import {ref,reactive, toRefs} from 'vue'
import {register} from 'network/user.js'
import { Notify,Toast } from 'vant';
import {useRouter} from 'vue-router'
export default {
  components: {
    navBar,
  },
  setup() {
      const router=useRouter()
      const userinfo=reactive({
          name:'',
          password:'',
          password_confirmation:'',
          email:''
      })

      const onSubmit=()=>{
        //   先验证
        // console.log(1);
        if(userinfo.password!=userinfo.password_confirmation){
            Notify({ type: 'danger', message: '密码不一致，请确认密码' });
        }else{
            register(userinfo).then(res=>{
                // console.log(res)
                if(res.status =='201'){
                    Toast.success('注册成功');
                    setTimeout(()=>{
                        router.push({path:'/login'})
                    },1000)
                }
            })
        }
      }
      return{
         ...toRefs(userinfo),
         onSubmit
      }
  },
};
</script>
<style lang="less" scoped>
.link-login{
    font-size: 14px;
    margin-bottom: 20px;
    color:#42b983;
}
</style>